<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"> 
    <title>列表</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">  
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="row" style="margin-top:10px;">
    <nav class="navbar navbar-default navbar-inverse" style='margin-bottom:3px;'>
      <div class="container-fluid">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#">社区问答</a>
        </div>

        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
          <ul class="nav navbar-nav navbar-right">
            <form class="navbar-form navbar-left" method='get'>
                <div class="form-group">
                  <input type="text" class="form-control" name="keyword" placeholder="">
                </div>
                <button type="submit" class="btn btn-default">搜索</button>
            </form>
            <li><a href="#">Link</a></li>
          </ul>
        </div><!-- /.navbar-collapse -->
      </div><!-- /.container-fluid -->
    </nav>
    <a href="{:url('add')}" class="btn btn-success glyphicon glyphicon-plus btn-sm" style='margin-bottom:5px;'>添加用户</a>
    <table class="table table-bordered table-hover">
        <thead>
            <tr>
                <th>id</th>
                <th>用户名</th>
                <th>密码</th>
                <th>邮箱</th>
                <th>时间</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody>
            {volist name='list' id='vo'}
                <tr>
                    <td>{$vo.id}</td>
                    <td>{$vo.username}</td>
                    <td>{$vo.password}</td>
                    <td>{$vo.email}</td>
                    <td>{$vo.create_time}</td>
                    <td>
                        <a href="update?id={$vo.id}" class="btn btn-primary glyphicon glyphicon-pencil btn-sm">编辑</a>
                        <button href="" class="btn btn-danger glyphicon glyphicon-trash btn-sm"  data-toggle="modal" data-id="{$vo.id}" data-target="#myModal">删除</button>
                    </td>
                </tr>
                <!-- 模态框（Modal） -->
                <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                    <div class="modal-dialog">
                        <div class="modal-content">
                            <div class="modal-header">
                                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                                    &times;
                                </button>
                                <h4 class="modal-title" id="myModalLabel">
                                    确定要删除？
                                </h4>
                            </div>
                            <div class="modal-footer" style="text-align:center">
                                <button type="button" class="btn btn-default" data-dismiss="modal">取消
                                </button>&nbsp;&nbsp;
                                <button type="button" class="btn btn-primary J-my-modal-id">
                                    删除
                                </button>
                            </div>
                        </div><!-- /.modal-content -->
                    </div><!-- /.modal -->
                </div>
            {/volist}
        </tbody>
    </table>
    {$page}
</div>
</div>
<script type="text/javascript">
    $('#myModal').on('show.bs.modal', function(e){
        var button = $(e.relatedTarget);
        var id = button.data('id');
        $('.J-my-modal-id').attr('data-id', id);
    });
    $('.J-my-modal-id').click(function(){
        var id = $(this).attr('data-id');
        $.ajax({
            url:'delete',
            type:'GET',
            data:{'id':id},
            dataType:'JSON',
            success: function(data){
                if(data.status == 1){
                    window.location.reload();
                }
            }
        })
    });
</script>
</body>
</html>